<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>商品列表</title>
    <link href="/src/image/favicon.ico" type="image/x-icon" rel="icon"/>
    <link href="/src/image/favicon.ico" type="image/x-icon" rel="shortcut icon"/>
    <link rel="stylesheet" href="/src/font/iconfont.css"/>
    <link rel="stylesheet" href="/src/libs/weui.min.css"/>
    <script id="script" src="/src/libs/require.min.js" defer async="true" require-module="./productList"
            data-main="/src/js/config.js"></script>
    <style type="text/css">
        * {
            font-family: -apple-system-font, "Helvetica Neue", Helvetica, sans-serif;
        }

        body {
            line-height: normal;
        }

        .mask {
            position: absolute;
            top: 0px;
            filter: alpha(opacity=60);
            background-color: #777;
            z-index: 500;
            left: 0px;
            opacity: 0.5;
            -moz-opacity: 0.5;
        }

        li {
            list-style-type: none;
        }

        .format-choose:before {
            border-top: none;
        }

        .format-choose .weui-cell {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        #settle_accounts:after {
            border-radius: 0;
        }

        .format-choose .weui-number-input {
            margin: 0 5px;
        }

        .searchbar-result:after {
            border-bottom: none;
        }

        #show_goods_list:after {
            border-bottom: none;
        }

        #show_goods_list:before {
            left: 10px;
        }

        .weui-search-bar:after {
            border-bottom: 1px solid #eee;
        }

        .first-category:before {
            left: 0;

        }

        .goodsname {
            font-size: 16px;
        }

        @media screen and (max-width: 320px) {
            .goodsname {
                font-size: 14px;
            }
        }

        #show_first_category li.active {
            color: green;
            background: #fff;
        }
        #show_first_category li.active:before{
            color: green;
            border-left: 4px solid #2BC17A;
            height: 84px;
        }

        #show_second_category li a {
            color: #666666;
            font-size: 16px;
            background: #F4F4F4;
        }

        #show_second_category li.active a {
            color: #333;
            background: #BBE8D1;
            border-color: #2BC17A;
        }
    </style>
</head>
<body ontouchstart="">
<div class="page">
    <div class="page__bd">
        <div class="weui-tab">
            <div class="weui-tab__panel">
                <div style="position: fixed;top: 0;width: 100%;height: 44px;z-index: 999;">
                    <div class="weui-search-bar" id="searchBar" style="background: #F8F8F8;">
                        <form class="weui-search-bar__form">
                            <div class="weui-search-bar__box">
                                <i class="weui-icon-search"></i>
                                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索商品"
                                       required=""/>
                                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                            </div>
                            <label class="weui-search-bar__label" id="searchText"> <i
                                    class="weui-icon-search"></i><span>搜索</span> </label>
                        </form>
                        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel"></a>
                    </div>
                </div>
                <div class="weui-flex weui-cells searchbar-result" id="searchResult"
                     style="margin-top: 62px;bottom:62px;height:100%">
                    <div id="productClass"
                         style="width:65px;top:62px;overflow-x: hidden;overflow-y: auto;margin-top: 44px;">
                        <nav>
                            <ul id="show_first_category">
                                <!--展示商品一级分类-->
                                <script type="text/html" id="show_first_category-tpl">
                                    {{each firstCategoryDataList as value i}}
                                    <li class="weui-cell first-category"
                                        style="list-style-type:none;background: #F8F8F8;font-size: 16px;"
                                        id="first_level_{{value.categoryId}}">{{value.categoryName}}
                                    </li>
                                    {{/each}}
                                </script>
                            </ul>
                        </nav>
                    </div>
                    <div id="right" class="weui-flex__item"
                         style="margin-left: 1px; margin-top: 38px;bottom:62px;width:98%;overflow-x: hidden;overflow-y: auto;">
                        <div id="subClass" style="display: block;margin-top: 5px;">
                            <nav>
                                <ul id="show_second_category" class="weui-flex" style="flex-wrap:wrap">
                                    <!--展示商品二级分类-->

                                </ul>
                            </nav>
                        </div>
                        <div class="weui-cells" style="width: 100%;margin-top: 0px;" id="show_goods_list">
                            <!--展示商品列表-->
                        </div>
                        <!--展示商品列表-->
                        <script type="text/html" id="show_goods_list-tp1">
                            {{each goodsDataList as value i}}
                            <li style="list-style-type:none;">
                                <div class="weui-cell"
                                     style="border-bottom: 1px solid #ddd;padding-left: 0px;margin-left: 10px;">
                                    <div class="weui-cell__bd">
                                        <a class="weui-cell weui-cell_access"
                                           href="/page/productInfo.html?id={{value.goodsId}}"
                                           style="padding-left: 0;padding-right:0; ">
                                            <div class="weui-cell__hd">
                                                <img src="{{value.image[0]}}" alt=""
                                                     style="display: block;  width: 54px;  height: 53px;margin-right: 5px;">
                                            </div>
                                            <div class="weui-cell__bd" style="">
                                                <p style="padding-bottom: 5px;" class="goodsname"><label>{{value.goodsName}}</label>
                                                </p>
                                                <p style="font-size:14px;"><label
                                                        style="font-size:14px;color: #FF715B;">¥</label><label
                                                        style="font-size:14px;color: #FF715B;"
                                                        id="one_retailPrice_{{value.vo_priceId}}">{{value.vo_retailPrice}}</label>
                                                    起
                                                </p>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="weui-cell__ft">
                                        <div class="weui-cell"
                                             style="text-align: right; padding-right: 0px;font-size:10px;">
                                            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default;"
                                               style="color: #fff;background: #2BC17A;border-radius: 20px;"
                                               id="goodsId_{{value.goodsId}}">选规格</a>
                                            <div class="user-number user-number-sub">
                                                <img src="/src/image/substact.png" id="one_sub_{{value.vo_priceId}}"
                                                     style="display: none;  width: 24px;  height: 24px;">
                                            </div>
                                            <input pattern="[0-9]*" class="weui-number-input"
                                                   style="text-align:center;width: 30px; display: none;margin: 0 5px;"
                                                   value="{{value.vo_shoppingCartNum}}"
                                                   id="one_edit_{{value.vo_priceId}}"

                                                   data-min="0"
                                                   data-max="9999"
                                                   data-step="1">

                                            <div class="user-number user-number-plus">
                                                <img src="/src/image/add.png" id="one_add_{{value.vo_priceId}}"
                                                     style="display: none;  width: 24px;  height: 24px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li style="list-style-type:none">
                                <div id="show_goods_price_list_{{value.goodsId}}" class="weui-cells format-choose"
                                     style="width: 100%;display:none;margin-top: 0;font-size: 14px;">
                                    <!--  展示规格 -->
                                </div>
                            </li>
                            {{/each}}
                        </script>
                        <div class="weui-loadmore weui-loadmore_line hide" id="noRec">
                            <span class="weui-loadmore__tips">暂无数据</span>
                        </div>
                        <div class="weui-loadmore weui-loadmore_line weui-loadmore_dot" id="cloading">
                            <span class="weui-loadmore__tips"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-tabbar" style="bottom: 52px; position: fixed;">
                <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on"
                   style="background: #434345;position: relative;text-align: left;">
                    <p style="font-size:18px;color:#FFF;position: absolute;left: 86px;">¥ <label id="totalNumber"
                                                                                                 style="font-weight: normal;">0.00</label>
                    </p>
                    <div style="position: absolute;top: -24px;">
                        <div style="position: relative;margin-left:15px;background: #FF715B;border:4px solid #434345; width: 52px;height: 52px;border-radius: 50%;text-align: center">
                            <img src="/src/image/shop.png" id="shoppingCartDetail"
                                 style="width: 28px;height: 28px;margin-top: 12px;display: inline-block;"/>
                            <span class="weui-badge"
                                  style="position: absolute;top: 0.45em;left:32px;background: #fff;color: #FF715B;font-size: xx-small;padding: .05em .3em;"
                                  id="totalCategory">0</span>
                        </div>
                    </div>
                </a>
                <a href="/page/order_submit.html" class="weui-btn weui-btn_primary "
                   style="background-color:#2CC17B;font-size:14px;border-radius: 0;font-size: 18px;padding-left: 30px;padding-right: 30px;"
                   id="settle_accounts">结算</a>
            </div>
        </div>
    </div>

    <!--include "../public/footer.html"-->
    <div id="dialogDetail" style="height:100%">
        <div class="mask" id="iosMask" style="display:none;">
        </div>
        <div class="weui-actionsheet " id="iosActionsheet">
            <div class="weui-actionsheet__cell" style="background-color:#F2F2F2;text-align:center;display:none"
                 id="noshoppingCartInfo">
                <label>您的购物车没有商品,快去购买吧</label>
            </div>
            <div class="weui-actionsheet__menu" id="show_shoppingCartVO">

            </div>
            <script type="text/html" id="show_shoppingCartVO-tpl">
                <div class="weui-actionsheet__cell" style="background-color:#F2F2F2;text-align:right;"
                     id="showOrhideclearmyshoppingcart">
                    <label id="clearmyshoppingcart" style="right:0px;">清空购物车&nbsp;&nbsp;</label>
                </div>
                {{each shoppingCartVODataList as value i}}
                <div class="weui-actionsheet__cell">
                    <li style="list-style-type:none">
                        <div class="weui-cell">
                            <div class="weui-cell__hd" style="width:20px">
                                <img src="{{value.image[0]}}" alt=""
                                     style="display: block;  width: 20px;  height: 20px;"
                                     id="shopping_isbuy_{{value.cartId}}">
                            </div>
                            <div class="weui-cell__bd">
                                <a class="weui-cell weui-cell_access">
                                    <div class="weui-cell__hd">
                                        <img src="{{value.image[0]}}" alt=""
                                             style="display: block;  width: 54px;  height: 54px;">
                                    </div>
                                    <div class="weui-cell__bd">
                                        <p style="font-size:14px;"><label>{{value.goodsName}}</label></p>
                                        <p style="font-size:12px;"><label
                                                style="font-size:12px;color: #ff0000;">￥</label><label
                                                style="font-size:12px;color: #ff0000;"
                                                id="shopping_retailPrice_{{value.priceId}}">{{value.retailPrice}}</label>/{{value.uniteName}}
                                        </p>
                                    </div>
                                </a>
                            </div>
                            <div class="weui-cell__ft">
                                <div class="weui-cell"
                                     style="text-align: right; padding-right: 0px;font-size:10px;">
                                    <div class="user-number user-number-sub">
                                        <img src="/src/image/substact.png"
                                             id="shopping_sub_{{value.priceId}}"
                                             style="display: block;  width: 24px;  height: 24px;">
                                    </div>
                                    <input pattern="[0-9]*" class="weui-number-input"
                                           style="text-align:center;width: 30px; display: block;margin: 0 5px;"
                                           value="{{value.quantity}}"
                                           id="shopping_edit_{{value.priceId}}"

                                           data-min="0"
                                           data-max="9999"
                                           data-step="1">

                                    <div class="user-number user-number-plus">
                                        <img src="/src/image/add.png" id="shopping_add_{{value.priceId}}"
                                             style="display: block;  width: 24px;  height: 24px;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </div>
                {{/each}}
            </script>

            <div class="weui-actionsheet__action">
                <div class="weui-actionsheet__cell " id="iosActionsheetCancel">
                    返回
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="show_goods_price_list-tpl">
    {{each goodspriceDataList as value i}}
    <li>
        <div class="weui-cell" style="background: #F9F9F9;margin-left: 10px;padding-left: 0;">
            <div class="weui-cell__hd">
                <p style="padding-left: 59px;"><label style="color: #FF715B;">¥</label><label style="color:  #FF715B;"
                                                                                              id="retailPrice_{{value.priceId}}">{{value.retailPrice}}</label><label>/{{value.unitName}}</label>
                </p>
            </div>
            <div class="weui-cell__bd">
                <!--<p><label>&nbsp;</label></p>-->
            </div>
            <div class="weui-cell__ft">
                <div class="weui-cell" style="padding-right: 0;padding-left: 0;">
                    <div class="user-number user-number-sub">
                        <img src="/src/image/substact.png" id="sub_{{value.priceId}}"
                             style="display: block;  width: 24px;  height: 24px;">
                    </div>
                    <input pattern="[0-9]*" class="weui-number-input"
                           style="text-align:center;width: 30px; display: block;margin: 0 5px;"
                           value="{{value.buyPrice}}"
                           id="edit_{{value.priceId}}"
                           data-min="0"
                           data-max="9999"
                           data-step="1">

                    <div class="user-number user-number-plus">
                        <img src="/src/image/add.png" id="add_{{value.priceId}}"
                             style="display: block;  width: 24px;  height: 24px;">
                    </div>
                </div>
            </div>
        </div>
    </li>
    {{/each}}
</script>
<!--展示商品二级分类-->
<script type="text/html" id="show_second_category-tpl">
    {{each secondCategoryDataList as value i}}
    <li style=" padding: 10px 1px 10px 10px;list-style-type:none" id="second_level_{{value.categoryId}}"><a
            href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default; "
            style="" >{{value.categoryName}}</a>
    </li>

    {{/each}}
</script>
</body>
</html>